<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
	<!-- 避免IE使用兼容模式 -->
	<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
	<meta name="renderer" content="webkit">
	<meta name="keywords" content=''/>
	<meta name="description" content=''/>
	<title>用户登录</title>
	<%@ page language="java" import="java.util.*" contentType="text/html; charset=utf-8" %>
	<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
	<%@taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
	<%@taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
	<%
		String path = request.getContextPath();
		String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
		String projectPath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path;
	%>
	<%--项目路径 --%>
	<c:set var="basePath" value="<%=projectPath%>"></c:set>
	<c:set var="ctx" value="${pageContext.request.contextPath}"/>
	<!-- 浏览器标签图片 -->
	<link rel="shortcut icon" href="${ctx}/topjui/image/favicon.ico"/>
	<link rel="stylesheet" href="${ctx}/static/plugins/bootstrap/css/bootstrap.min.css">
	<link rel="stylesheet" href="${ctx}/static/plugins/font-awesome/css/font-awesome.min.css">
	<style type="text/css">
		html, body {
			height: 100%;
		}

		.box {
			background: url("${ctx}/topjui/image/bglogin.jpg") no-repeat center center;
			background-size: cover;

			margin: 0 auto;
			position: relative;
			width: 100%;
			height: 100%;
		}

		.login-box {
			width: 100%;
			max-width: 500px;
			height: 400px;
			position: absolute;
			top: 50%;

			margin-top: -200px;
			/*设置负值，为要定位子盒子的一半高度*/

		}

		@media screen and (min-width: 500px) {
			.login-box {
				left: 50%;
				/*设置负值，为要定位子盒子的一半宽度*/
				margin-left: -250px;
			}
		}

		.form {
			width: 100%;
			max-width: 500px;
			height: 275px;
			margin: 2px auto 0px auto;
		}

		.login-content {
			border-bottom-left-radius: 8px;
			border-bottom-right-radius: 8px;
			height: 250px;
			width: 100%;
			max-width: 500px;
			background-color: rgba(255, 250, 2550, .6);
			float: left;
		}

		.input-group {
			margin: 30px 0px 0px 0px !important;
		}

		.form-control,
		.input-group {
			height: 40px;
		}

		.form-actions {
			margin-top: 30px;
		}

		.form-group {
			margin-bottom: 0px !important;
		}

		.login-title {
			border-top-left-radius: 8px;
			border-top-right-radius: 8px;
			padding: 15px 10px;
			background-color: rgba(0, 0, 0, .6);
		}

		.login-title h1 {
			margin-top: 10px !important;
		}

		.login-title small {
			color: #fff;
		}

		.link p {
			line-height: 20px;
			margin-top: 30px;
		}

		.btn-sm {
			padding: 8px 24px !important;
			font-size: 16px !important;
		}

		.flag {
			position: absolute;
			top: 10px;
			right: 10px;
			color: #fff;
			font-weight: bold;
			font: 14px/normal "microsoft yahei", "Times New Roman", "宋体", Times, serif;
		}
	</style>
</head>
<body>
<div class="box">
	<div class="login-box">
		<div class="login-title text-center">
			<span class="flag"><i class="fa fa-user"></i> 用户登陆</span>
			<h1>
				<img src="${ctx}/images/LOGO.png" style="margin-right:5px;;vertical-align:middle;"><small>中石油车辆管理平台</small>
			</h1>
		</div>
		<div class="login-content ">
			<div class="form">
				<form id="modifyPassword" class="form-horizontal" action="#" method="post">
					<div class="form-group">
						<div class="col-xs-10 col-xs-offset-1">
							<div class="input-group">
								<span class="input-group-addon"><span class="glyphicon glyphicon-user"></span></span>
								<input type="text" id="loginName" name="loginName" class="form-control" placeholder="帐号"
								       value="wangxin">
							</div>
						</div>
					</div>
					<div class="form-group">
						<div class="col-xs-10 col-xs-offset-1">
							<div class="input-group">
								<span class="input-group-addon"><span class="glyphicon glyphicon-lock"></span></span>
								<input type="password" id="passWord" name="passWord" class="form-control"
								       placeholder="密码" value="abc123">
							</div>
						</div>
					</div>
					<div class="form-group form-actions">
						<div class="col-xs-12 text-center">
							<button type="button" id="login" class="btn btn-sm btn-success">
								<span class="fa fa-check-circle"></span> 登录
							</button>
							<button type="button" id="reset" class="btn btn-sm btn-danger">
								<span class="fa fa-close"></span> 重置
							</button>
						</div>
					</div>
				</form>
			</div>
		</div>
	</div>
</div>

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
	<div class="modal-dialog modal-sm" role="document">
		<div class="modal-content">
			<div class="modal-body">
				<span class="text-danger"><i class="fa fa-warning"></i> <font id="message"></font></span>
			</div>
		</div>
	</div>
</div>

<!-- 引入jQuery -->
<script src="${ctx}/static/plugins/jquery/jquery.min.js"></script>
<script src="${ctx}/static/plugins/jquery/jquery.cookie.js"></script>
<script src="${ctx}/static/plugins/bootstrap/js/bootstrap.min.js"></script>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="${ctx}/static/plugins/bootstrap/plugins/html5shiv.min.js"></script>
<script src="${ctx}/static/plugins/bootstrap/plugins/respond.min.js"></script>
<![endif]-->
<script type="text/javascript">
	if (navigator.appName == "Microsoft Internet Explorer" &&
			(navigator.appVersion.split(";")[1].replace(/[ ]/g, "") == "MSIE6.0" ||
			navigator.appVersion.split(";")[1].replace(/[ ]/g, "") == "MSIE7.0" ||
			navigator.appVersion.split(";")[1].replace(/[ ]/g, "") == "MSIE8.0")
	) {
		alert("您的浏览器版本过低，请使用火狐浏览器");
	}
</script>
<script type="text/javascript">
	$(function () {

		$('#passWord').keyup(function (event) {
			if (event.keyCode == "13") {
				$("#login").trigger("click");
				return false;
			}
		});

		$("#login").on("click", function () {
			var loginName = $.trim($('#loginName').val());
			var passWord = $.trim($('#passWord').val());
			if (loginName == '') {
				$('#message').text('请输入帐号!');
				$('#myModal').modal();
				return;
			}
			if (passWord == '') {
				$('#message').text('请输入密码!');
				$('#myModal').modal();
				return;
			}
			submitForm();
		});

		function submitForm() {
			if (navigator.appName == "Microsoft Internet Explorer" &&
					(navigator.appVersion.split(";")[1].replace(/[ ]/g, "") == "MSIE6.0" ||
					navigator.appVersion.split(";")[1].replace(/[ ]/g, "") == "MSIE7.0" ||
					navigator.appVersion.split(";")[1].replace(/[ ]/g, "") == "MSIE8.0")
			) {
				alert("您的浏览器版本过低，请使用火狐浏览器");
			} else {
				var formData = {
					"loginName": $.trim($('#loginName').val()),
					"passWord": $.trim($('#passWord').val()),
				};
				$.ajax({
					type: 'POST',
					url: '${ctx}/toLogin',
					dataType: 'json',
					data: formData,
					success: function (data) {
						if (data.success) {
							location.href = '${ctx}/main';
						} else {
							$('#message').text(data.msg);
							$('#myModal').modal();
						}
					},
					error: function () {

					}
				});
			}
		}

		$("#reset").on("click", function () {
			$("#loginName").val("");
			$("#passWord").val("");
		});
	});
</script>
</body>
</html>